<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="_csrf" th:if="${_csrf}" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:if="${_csrf}" th:content="${_csrf.headerName}"/>
    <title>Service UI Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3">
    <div th:fragment="gauthConfirmation">
        <div class="mdc-dialog" th:id="${dialogId}" role="alertdialog"
             aria-modal="true" aria-labelledby="notif-dialog-title" aria-describedby="notif-dialog-content">
            <form method="post" th:id="${'fm-' + dialogId}" class="fm-v clearfix">
                <div class="mdc-dialog__container">
                    <div class="mdc-dialog__surface">
                        <h2 class="mdc-dialog__title mt-lg-2" id="notif-dialog-title" th:utext="#{${title}}"> Confirm Account</h2>
                        <div class="mdc-dialog__content" id="notif-dialog-content">
                            <div class="mdc-typography--body1">
                                <div class="banner banner-danger alert alert-danger banner-dismissible"
                                     role="alert" style="display: none" th:id="${'errorPanel-' + dialogId}">
                                    <button type="button" class="close" onclick="$(this).parent().hide();" th:aria-label="#{screen.pm.button.close}">
                                        <span class="mdi mdi-close-box" aria-hidden="true"></span>
                                    </button>
                                    <h3>Failure</h3>
                                    <p th:utext="#{screen.authentication.gauth.invalidtoken}">
                                </div>

                                <p th:utext="#{${description}}">Description</p>

                                <input type="hidden" th:name="${'_eventId_' + eventId}" value="Confirm"/>
                                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                                <input type="hidden" name="geolocation"/>

                                <section class="cas-field form-group my-3 mdc-input-group">
                                    <div class="mdc-input-group-field mdc-input-group-field-append">
                                        <div class="d-flex caps-check">
                                            <label for="token"
                                                   class="mdc-text-field mdc-text-field--outlined control-label mdc-text-field--with-trailing-icon">
                                                <span class="mdc-notched-outline">
                                                    <span class="mdc-notched-outline__leading"></span>
                                                    <span class="mdc-notched-outline__notch">
                                                        <span class="mdc-floating-label"
                                                              th:utext="#{cas.mfa.googleauth.label.token}">Token</span>
                                                    </span>
                                                    <span class="mdc-notched-outline__trailing"></span>
                                                </span>
                                                <input class="mdc-text-field__input form-control pwd"
                                                       type="password"
                                                       name="token"
                                                       id="token"
                                                       size="25"
                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                                       required
                                                       autocomplete="off"/>
                                            </label>
                                            <button class="reveal-password align-self-end mdc-button mdc-button--raised btn btn-primary mdc-input-group-append mdc-icon-button"
                                                    tabindex="-1"
                                                    type="button">
                                                <i class="mdi mdi-eye fas fa-eye reveal-password-icon" aria-hidden="true"></i>
                                                <span class="visually-hidden">Toggle Token</span>
                                            </button>
                                        </div>
                                        <div th:if="${confirmationType == 'create'}">
                                            <br>
                                            <div class="d-flex">
                                                <label for="accountName"
                                                       class="mdc-text-field mdc-text-field--outlined control-label">
                                                    <span class="mdc-notched-outline">
                                                        <span class="mdc-notched-outline__leading"></span>
                                                        <span class="mdc-notched-outline__notch">
                                                            <span class="mdc-floating-label" th:utext="#{screen.authentication.gauth.name}">Account Name</span>
                                                        </span>
                                                        <span class="mdc-notched-outline__trailing"></span>
                                                    </span>
                                                    <input class="mdc-text-field__input form-control"
                                                           type="text"
                                                           name="accountName"
                                                           id="accountName"
                                                           size="50"
                                                           autocomplete="off"/>
                                                </label>
                                                <script>document.getElementById("accountName").value = randomWord();</script>
                                            </div>
                                        </div>
                                        <div th:if="${confirmationType == 'delete'}">
                                            <input type="hidden" id="confirmAccountId" name="accountId" />
                                        </div>
                                        <div th:if="${confirmationType == 'add'}">
                                            <br/>
                                            <div class="mdc-select mdc-select--outlined mdc-select--required mdc-menu-surface--fullwidth authn-source">
                                                <input type="hidden" name="accountId">
                                                <div class="mdc-select__anchor"
                                                     role="button"
                                                     aria-required="true"
                                                     aria-haspopup="listbox"
                                                     aria-expanded="false">
                                                    <span class="mdc-line__ripple"></span>
                                                    <span class="mdc-notched-outline">
                                                            <span class="mdc-notched-outline__leading"></span>
                                                            <span class="mdc-notched-outline__notch">
                                                                <span id="outlined-select-label" class="mdc-floating-label"
                                                                      th:utext="#{screen.account.mfadevices.title}">Registered Accounts</span>
                                                            </span>
                                                            <span class="mdc-notched-outline__trailing"></span>
                                                        </span>
                                                    <span class="mdc-select__selected-text-container">
                                                            <span class="mdc-select__selected-text"/>
                                                        </span>
                                                    <span class="mdc-select__dropdown-icon">
                                                            <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5"
                                                                 focusable="false">
                                                                <polygon class="mdc-select__dropdown-icon-inactive" stroke="none"
                                                                         fill-rule="evenodd" points="7 10 12 15 17 10">
                                                                </polygon>
                                                                <polygon class="mdc-select__dropdown-icon-active" stroke="none"
                                                                         fill-rule="evenodd" points="7 15 12 10 17 15">
                                                                </polygon>
                                                            </svg>
                                                        </span>
                                                    <span class="mdc-line-ripple"></span>
                                                </div>

                                                <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
                                                    <ul class="mdc-list" role="listbox">
                                                        <li th:each="account,iter : ${registeredDevices}" class="mdc-list-item "
                                                            th:id="${account.id}"
                                                            th:classappend="${iter.index == 0 ? 'mdc-list-item--selected' : ''}"
                                                            th:data-value="${account.id}" role="option">
                                                            <span class="mdc-list-item__ripple"></span>
                                                            <span class="mdc-list-item__text" th:utext="${account.name}">Device</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                        <footer class="mdc-dialog__actions">
                            <button class="mdc-button mdc-button--raised btn btn-primary me-2"
                                    th:name="${actionButton}" th:id="${actionButton}">
                                <span class="mdc-button__label" th:text="#{${actionButtonLabel}}">Continue</span>
                            </button>
                            <button type="button" class="mdc-button mdc-button--outline btn btn-outline-secondary button-cancel"
                                    data-mdc-dialog-action="accept" data-mdc-dialog-button-default>
                                <span class="mdc-button__label">Cancel</span>
                            </button>
                        </footer>
                    </div>
                </div>
                <div class="mdc-dialog__scrim"></div>
            </form>

            <script type="text/javascript" th:inline="javascript">
                /*<![CDATA[*/

                document.getElementById(/*[[${actionButton}]]*/).addEventListener('click', event => {
                    if (document.getElementById("fm-" + /*[[${dialogId}]]*/).reportValidity()) {
                        let endpoint = $('#fm-' + /*[[${dialogId}]]*/).attr('action');
                        event.preventDefault();
                        $('#errorPanel-' + /*[[${dialogId}]]*/).hide();

                        let formData = $('#fm-' + /*[[${dialogId}]]*/).serializeArray();
                        formData.push({
                            name: "validate",
                            value: true
                        });
                        $.post(endpoint, formData)
                            .done((data, status, jqxhr) => {
                                $('#errorPanel-' + /*[[${dialogId}]]*/).hide();
                                $('#fm-' + /*[[${dialogId}]]*/).submit();
                            })
                            .fail((data, status, jqxhr) => $('#errorPanel-' + /*[[${dialogId}]]*/).show("fast", "swing"));
                    }
                }, false);
                // /*]]>*/
            </script>
        </div>
    </div>
</main>
</body>
</html>
